<template>
	<view class="mini-box">
		<view class="inside">
			<view class="audio-bars">
			  <view class="bar"></view>
			  <view class="bar"></view>
			  <view class="bar"></view>
			</view>
			<slot>默认</slot>
		</view>
	</view>
</template>

<script setup>

</script>

<style lang="scss">
.mini-box{
	// width: 84rpx;
	height: 36rpx;
	background-color: #60d000;
	border-top-left-radius: 18rpx;
	border-bottom-right-radius: 18rpx;
	font-size: 22rpx;
	color: #fff;
	display: inline-block;
	.inside{
		display: flex;
		align-items: center;
		padding: 2rpx 8rpx;
	}
}
.audio-bars {
  display: flex;
  align-items: flex-end;
  gap: 3rpx;
  height: 18rpx;
  margin-right: 5rpx;
}

.bar {
  width: 2px;
  background: linear-gradient(to top, #fff);
  border-radius: 2px;
  animation: bar-dance 0.5s infinite alternate;
}

.bar:nth-child(1) { height: 30%; animation-delay: 0s; }
.bar:nth-child(2) { height: 50%; animation-delay: 0.2s; }
.bar:nth-child(3) { height: 40%; animation-delay: 0.4s; }
.bar:nth-child(4) { height: 60%; animation-delay: 0.6s; }

@keyframes bar-dance {
  0% { height: 10%; }
  20% {height: 20%; }
  30% {height: 30%; }
  40% {height: 40%; }
  50% {height: 50%; }
  60% {height: 60%; }
  70% {height: 70%; }
  to { height: 80%; }
}
</style>